
.generate-margins(60);

.generate-margins(@n, @i: 1) when (@i =< @n) {
    .m_@{i} {
        margin: 0px+@i;
    }

    .mt_@{i} {
        margin-top: 0px+@i;
    }

    .ml_@{i} {
        margin-left: 0px+@i;
    }

    .mr_@{i} {
        margin-right: 0px+@i;
    }

    .mb_@{i} {
        margin-bottom: 0px+@i;
    }

    // padding
    .p_@{i} {
        padding: 0px+@i;
    }

    .pt_@{i} {
        padding-top: 0px+@i;
    }

    .pl_@{i} {
        padding-left: 0px+@i;
    }

    .pr_@{i} {
        padding-right: 0px+@i;
    }

    .pb_@{i} {
        padding-bottom: 0px+@i;
    }

    // width
    .width_@{i} {
        width: 0px+@i;
    }

    .w_@{i} {
        width: 0px+@i;
    }

    // height
    .height_@{i} {
        height: 0px+@i;
    }

    .h_@{i} {
        height: 0px+@i;
    }

    // font-size
    .fsz_@{i} {
        font-size: 0px+@i;
    }

    .lh_@{i} {
        line-height: 0px+@i;
    }
    .generate-margins(@n, (@i+1));
}

.generate(600);

.generate(@n, @i: 60) when (@i =< @n) {
    .m_@{i} {
        margin: 0px+@i;
    }

    .mt_@{i} {
        margin-top: 0px+@i;
    }

    .ml_@{i} {
        margin-left: 0px+@i;
    }

    .mr_@{i} {
        margin-right: 0px+@i;
    }

    .mb_@{i} {
        margin-bottom: 0px+@i;
    }

    // padding
    .p_@{i} {
        padding: 0px+@i;
    }

    .pt_@{i} {
        padding-top: 0px+@i;
    }

    .pl_@{i} {
        padding-left: 0px+@i;
    }

    .pr_@{i} {
        padding-right: 0px+@i;
    }

    .pb_@{i} {
        padding-bottom: 0px+@i;
    }

    // width
    .width_@{i} {
        width: 0px+@i;
    }

    .w_@{i} {
        width: 0px+@i;
    }

    // height
    .height_@{i} {
        height: 0px+@i;
    }

    .h_@{i} {
        height: 0px+@i;
    }

    // font-size
    .fsz_@{i} {
        font-size: 0px+@i;
    }

    .lh_@{i} {
        line-height: 0px+@i;
    }
    .generate(@n, (@i+5));
}
